<template>
  <div :class="{'card card11':!isLine,'card card12':isLine}">
    <h2><span /></h2>
    <chart ref="chart" :data="data" />
  </div>
</template>

<script>
import Bus from '@/common/bus'
import chart from './chart'

export default {
  components: {
    chart
  },
  data() {
    return {
      isLine: false,
      data1: undefined,
      data2: undefined,
      data: {}
    }
  },
  created() {
    const that = this
    Bus.$on('nodeInfo', nodeInfo => {
      that.data1 = nodeInfo.inPower
      that.data2 = nodeInfo.outPower
      that.isLine = false
      that.getData()
    })
    Bus.$on('lineInfo', lineInfo => {
      that.data1 = lineInfo.inFlow
      that.data2 = lineInfo.outFlow
      that.isLine = true
      that.getData()
    })
  },
  methods: {
    getData() {
      this.data = {
        legend: {
          data: this.isLine
            ? ['流入碳流', '流出碳流']
            : ['输入功率', '输出功率'],
          top: 10,
          right: 0,
          icon: 'rect',
          itemWidth: 15,
          itemHeight: 10
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '5%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.isLine
            ? ['0', '1', '2', '3', '4', '5', '6', '7', '8']
            : ['0', '1', '2', '3', '4', '5', '6', '7'],
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255, .2)'
            }
          }
        },
        yAxis: [
          {
            name: this.isLine ? '(碳流)' : '(功率/W)',
            nameTextStyle: {
              align: 'right'
            },
            type: 'value',
            axisLine: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255, .1)'
              }
            },
            axisPointer: {
              show: false
            }
          }
        ],
        series: [
          {
            name: this.isLine ? '流入碳流' : '输入功率',
            data: this.data1,
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 2
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.5,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165, .5)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236, .2)'
                }
              ])
            }
          },
          {
            name: this.isLine ? '流出碳流' : '输出功率',
            data: this.data2,
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 2
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.5,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165, .5)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236, .2)'
                }
              ])
            }
          }
        ]
      }
    }
  }
}
</script>
